<template>
    <div>
        <h3>批量引入组件</h3>
        <template v-for="item in com" :key="item.id">
            <component :is="item.name"></component>
        </template>
        <Child></Child>
    </div>
</template>

<script>
import Child from './Child.vue'
// 文件
const allComponents = require.context('@/components/BatchCom', true, /\.vue$/);
// 文件夹
const folderComponents = require.context('@/components/BatchComFolder', true, /\.vue$/);

const res_components = {};
const folderCom = {}
allComponents.keys().forEach(fileName => {
    let comp = allComponents(fileName);
    let compName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
    res_components[compName] = comp.default;
});
// 文件夹下的组件
folderComponents.keys().forEach(fileName => {
    let comp = folderComponents(fileName);
    const reg = /(?<=\/).*?(?=\/)/
    const folderName = fileName.match(reg)?.[0]
    if (folderName) folderCom[folderName] = comp.default
});

export default {
    components: {
        Child,
        ...res_components,
        ...folderCom
    },
    data () {
        return {
            com: [
                {
                    id: 'a',
                    name: 'BaseButton'
                },
                {
                    id: 'b',
                    name: 'BaseIcon'
                },
                {
                    id: 'c',
                    name: 'BaseForm'
                },
                {
                    id: 'd',
                    name: 'BaseTable'
                }
            ]
        }
    }
}

</script>

<style lang='less' scoped></style>